<template>
  <div class="waiting-wrap">
    <el-dialog :close-on-click-modal="false" append-to-body modal-append-to-body lock-scroll top="10%" :title="$t('cti.waite')" :visible.sync="showTransferCancelDialog" @close="closeWaitingDialog" class="call-label" size="30%">
      <template>
        <p class="wat-p">{{$t('cti.waiting')}}<span class="seat">{{$t('cti.jobNumber')}}{{waitState.Exten}}</span>{{$t('cti.pleaseWait')}}( <span>{{waitState.time}}</span> )</p>
        <div class="waiting-btn-wrap">
          <el-button type="primary" class="primary_btn" @click="closeAction()">{{$t('cti.backstageWaiting')}}</el-button>
          <el-button class="primary_btn" v-show="this.waitState.isTransfer || isShowCancleCounsultBtn" @click="phoneCancelTransfer">{{this.waitState.isTransfer ? $t('cti.cancleTransferBtn') : $t('cti.cancleConsultBtn')}}</el-button>
        </div>
      </template>
    </el-dialog>
  </div>
</template>
<script>
  // 此组件为电话条转接或咨询的等待ing弹窗
  export default {
    name: 'waiting',
    props: ['waitState', 'showTransferCancelDialog'],
    data () {
      return {
        showClose: false
      }
    },
    methods: {
      phoneCancelTransfer () {
        // isTransfer为true是转接 为false是咨询
        if (this.waitState.isTransfer) {
          this.$store.dispatch('phoneCancelTransfer') // 取消转接
        } else {
          this.$store.dispatch('phoneCancelAdvisory', {exten: this.waitState.Exten}) // 取消咨询
        }
      },
      closeAction () {
        this.$store.commit('SHOWTRANSFERCANCELDIALOG', false)
      },
      closeWaitingDialog () { // 点击后台等待的时候，要清除定时器
        if (this.$store.state.cti.globalLet._cti_ui_notifyDialogInterval) {
          window.clearInterval(this.$store.state.cti.globalLet._cti_ui_notifyDialogInterval)
        }
      }
    },
    computed: {
      isShowCancleCounsultBtn () { // 是否展示取消咨询的按钮
        return this.$store.state.cti.globalLet.isShowCancleCounsultBtn || false
      }
    }
  }
</script>
<style lang="stylus" scoped>
  @import "../../../assets/common.styl"
  div
    width 100%
    height 100%
  .call-label
    text-align left
  .seat
    color #8ecbd1
  .wat-p
    text-align center
  .waiting-btn-wrap
    display block
    text-align center
    margin 20px 0 10px 0
</style>
